<script setup>
import { onMounted } from 'vue'
import { getUserInfo } from '@/api/user.js'
import { ref } from 'vue'

defineOptions({
  name: 'personIndex'
})
onMounted(() => flush())
const userInfo = ref(false)
const isEdit = ref(false)

const flush = async () => (userInfo.value = await getUserInfo())
const togEdit = () => (isEdit.value = !isEdit.value)
</script>

<template>
  <div class="bg-white">
    <ShopNavbar :title="'个人主页'" />
    <uploadAvatar @flush="flush" :userInfo="userInfo"></uploadAvatar>
    <div v-if="!isEdit">
      <van-cell title="用户名称" :value="userInfo.name" />
      <van-cell
        title="手机号"
        :value="userInfo.phone ? userInfo.phone : '空'"
      />
      <van-cell title="电子邮箱" :value="userInfo.email" />
      <van-button block plain type="default" @click="togEdit"
        >编辑信息</van-button
      >
    </div>
    <personEditForm
      v-else
      :userInfo="userInfo"
      @togEdit="togEdit"
      @flush="flush"
    ></personEditForm>
  </div>
</template>

<style scoped lang="scss"></style>
